<template>
	<view class="cu-bar tabbar bg-white zaiui-footer-fixed">
		<view class="cu-bar tabbar bg-white zaiui-footer-fixed">
			<view class="action boser-size" :class="TabID == 0?'text-red':'text-black'" @tap="tabTap(0)">
				<view :class="TabID == 0?'cuIcon-indexfill':'cuIcon-index'"></view>
				<text>首页</text>
			</view>
			<view class="action boser-size" :class="TabID == 1?'text-red':'text-black'" @tap="tabTap(1)">
				<view :class="TabID == 1?'cuIcon-unionfill':'cuIcon-union'"></view>
				<text>联盟</text>
			</view>
			<view class="action boser-size" :class="TabID == 2?'text-red':'text-black'" @tap="tabTap(2)">
				<view :class="TabID == 2?'cuIcon-findfill':'cuIcon-find'"></view>
				<text>发现</text>
			</view>
			<!-- <view class="action add-action" @tap="tabTap(2)">
				<button class="cu-btn cuIcon-add bg-red shadow"></button>
				<text>卖二手</text>
			</view> -->
			<view class="action boser-size" :class="TabID == 3?'text-red':'text-black'" @tap="tabTap(3)">
				<view :class="TabID == 3?'cuIcon-shoppingfill':'cuIcon-shopping'">
					<view class="cu-tag badge" v-if="MsgDot"></view>
				</view>
				<text>购物车</text>
			</view>
			<view class="action boser-size" :class="TabID == 4?'text-red':'text-black'" @tap="tabTap(4)">
				<view :class="TabID == 4?'cuIcon-my_off':'cuIcon-my_no'"></view>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'footer-tabbar',
		data() {
			return {
				TabID: 0, MsgDot: false,
			};
		},
		props: {
			tabID: {
				type: [String,Number],
				default: 0
			},
			msgDot: {
				type: Boolean,
				default: false
			},
		},
		created() {
			this.TabID = this.tabID;
			this.MsgDot = this.msgDot;
		},
		watch: {
			tabID() {
				//关于按钮凸起，只有2不改变
				//if(this.tabID != 2) {
					this.TabID = this.tabID;
				//}
			},
			msgDot() {
				this.MsgDot = this.msgDot;
			}
		},
		methods: {
			tabTap(index) {
				if(index != this.TabID) {
					this.$emit('tabTap', index);
				}
			}
		}
	}
</script>

<style>
/* .action.boser-size{
	
} */
/* 首页 */
.cuIcon-indexfill{
	background-image: url(../../../pages/images/tab/img_index_off.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
.cuIcon-index{
	background-image: url(../../../pages/images/tab/img_index_no.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
/* 联盟 */		
.cuIcon-unionfill{
	background-image: url(../../../pages/images/tab/img_union_off.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
	
}
.cuIcon-union{
	background-image: url(../../../pages/images/tab/img_union_no.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
/* 发现 */
.cuIcon-findfill{
	background-image: url(../../../pages/images/tab/img_find_off.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
.cuIcon-find{
	background-image: url(../../../pages/images/tab/img_find_no.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
/* 购物车 */
.cuIcon-shoppingfill{
	background-image: url(../../../pages/images/tab/img_shopping_off.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
.cuIcon-shopping{
	background-image: url(../../../pages/images/tab/img_shopping_no.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
	
	/* 我的 */
.cuIcon-my_off{
	background-image: url(../../../pages/images/tab/img_my_off.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
.cuIcon-my_no{
	background-image: url(../../../pages/images/tab/img_my_no.png);
	background-size: 54upx 54upx;
	width: 54upx;
	height: 54upx;
}
	
</style>
